import React, { useState } from "react";
import {
  Animated, StyleSheet,
  Text,
  TouchableOpacity,
  View
} from "react-native";
import ScrollView = Animated.ScrollView;
import {
  Button,
  Drawer,
  Flex,
  List,
  Pagination,
  SegmentedControl, Tabs,
  WhiteSpace,
  WingBlank
} from "@ant-design/react-native";
// @ts-ignore
import AntDesign from "react-native-vector-icons/AntDesign";

const renderContent = (tab: any, index: any) => {
  const style = {
    paddingVertical: 40,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
    backgroundColor: '#ddd'
  }

  const content = [1, 2, 3, 4, 5, 6, 7, 8].map((i) => {
    return (
      <View key={`${index}_${i}`} style={{
        paddingVertical: 40,
        justifyContent: 'center',
        alignItems: 'center',
        margin: 10,
        backgroundColor: '#ddd'
      }}>
        <Text>
          {tab.title} - {i}
        </Text>
      </View>
    )
  })

  return (
    <ScrollView key={index} style={{backgroundColor: '#fff'}}>
      {content}
    </ScrollView>
  )

}
export default class DrawerExample extends React.Component<any, any> {

  render() {
    const tabs = [
      {title: 'First Tab'},
      {title: 'Second Tab'},
      {title: 'Third Tab'},
    ]

    const tabs2 = [
      {title: '1st Tab'},
      {title: '2nd Tab'},
      {title: '3rd Tab'},
      {title: '4th Tab'},
      {title: '5th Tab'},
      {title: '6th Tab'},
      {title: '7th Tab'},
      {title: '8th Tab'},
      {title: '9th Tab'},
    ]

    const style = {
      alignItems: 'center',
      justifyContent: 'center',
      height: 150,
      backgroundColor: '#fff',
    }
    return (
      <View style={{flex: 1}}>
        <Tabs tabs={tabs}>
          <View style={{
            alignItems: 'center',
            justifyContent: 'center',
            height: 150,
            backgroundColor: '#fff',
          }}>
            <Text>第一份Tab内容</Text>
          </View>
          <View style={{
            alignItems: 'center',
            justifyContent: 'center',
            height: 150,
            backgroundColor: '#fff',
          }}>
            <Text>第二份Tab内容</Text>
          </View>
          <View style={{
            alignItems: 'center',
            justifyContent: 'center',
            height: 150,
            backgroundColor: '#fff',
          }}>
            <Text>第三份Tab内容</Text>
          </View>
        </Tabs>
        <Text style={{margin: 16}}> Custom RenderTabBar</Text>
        <Tabs
          tabs={tabs}
        >
          <View style={{
            alignItems: 'center',
            justifyContent: 'center',
            height: 150,
            backgroundColor: '#fff',
          }}>
            <Text>Content of First Tab</Text>
          </View>
          <View style={{
            alignItems: 'center',
            justifyContent: 'center',
            height: 150,
            backgroundColor: '#fff',
          }}>
            <Text>Content of Second Tab</Text>
          </View>
          <View style={{
            alignItems: 'center',
            justifyContent: 'center',
            height: 150,
            backgroundColor: '#fff',
          }}>
            <Text>Content of Third Tab</Text>
          </View>
        </Tabs>

        <View style={{ flex: 2 }}>
          <Tabs tabs={tabs2} initialPage={1} tabBarPosition="top">
            {tabs2.map((tab, index) => renderContent(tab, index))}
          </Tabs>
        </View>
      </View>
    )
  }
}


